<!DOCTYPE html>
<meta charset="UTF-8">
<title>grid</title>
<link rel="import" href="../../common/layout.html">

<style>

	cc-grid {
		height: 800px;
	}

	.pager-grid, .data-grid {
		display: inline-block;
		overflow: auto;
	}

	.info span {
		display: block;
	}

	.demo {
		margin: .5em;
	}

</style>

<main ng-app="componentsApp" ng-controller="ctrl as app">
	<div class="pager-grid">

		<strong style="display: block;">表格宽高由用户设定,默认继承自父容器 | 自定义返回列表数据字段名</strong>
		<button type="button" ng-click="app.refreshGrid()">refresh</button>
		<cc-grid opts="app.pagerGridOptions" selected-items="app.selectedItems" type="selectable" on-refresh="app.onRefresh(opts)" style="height: 200px;width: 600px;"></cc-grid>

		<div class="info">

			<span>查询参数</span>
			<span ng-bind="app.pagerGridOptions.queryParams|json"></span>

			<span>选中数据</span>
			<span ng-bind="app.selectedItems|json"></span>
		</div>

	</div>

	<div class="pager-grid">

		<strong style="display: block;">表格宽高由用户设定,默认继承自父容器 | 自定义行元素</strong>
		<button type="button" ng-click="app.refreshGrid()">refresh</button>
		<cc-grid opts="app.pagerGridOptions2" selected-items="app.selectedItems" type="selectable" on-refresh="app.onRefresh(opts)" style="height: 200px;width: 600px;"></cc-grid>

		<div class="info">

			<span>查询参数</span>
			<span ng-bind="app.pagerGridOptions.queryParams|json"></span>

			<span>选中数据</span>
			<span ng-bind="app.selectedItems|json"></span>
		</div>

	</div>

	<div class="data-grid">

		<strong style="display: block;">无分页的表格</strong>
		<button type="button" ng-click="app.refreshDataGrid()">refresh</button>
		<cc-grid opts="app.dataGridOptions" style="height: 400px;width: 600px;"></cc-grid>

	</div>

	<div class="demo">
		<h3>grid(自定义隐藏列)</h3>
		<cc-grid opts="app.gridOption3" style="height: 400px;width: 600px;"></cc-grid>
	</div>

	<div class="demo">
		<h3>grid(数据加载出错)</h3>
		<cc-grid opts="app.gridOption4" style="height: 400px;width: 600px;"></cc-grid>
	</div>

	<div class="demo">
		<h3>grid(没有数据)</h3>
		<cc-grid opts="app.gridOption5" style="height: 400px;width: 600px;"></cc-grid>
	</div>
</main>

<!--<script src="/node_modules/angular/angular.js"></script>-->
<!--<script src="/node_modules/angular-resource/angular-resource.js"></script>-->
<!--<script src="/node_modules/angular-ui-router/release/angular-ui-router.js"></script>-->
<!--<script src="/dist/ccms-components.min.js"></script>-->
<!--<script src="index.js"></script>-->

<script src="/components.js"></script>
<script src="index.js"></script>

